Drupal has enough power and flexibility for creation a custom theme. But you need to know how Drupal works with themes to be able to choose the optional way. Knowing of theme creation principles you can minimize your code and resources.
Does it mean that you should learn CMS from beginning to the end just to create your own Drupal theme? For understanding of the most important things you need to know:
1. Drupal terminology
2. XHTML and CSS
3. Javascript and jQuery (It’s needed when you are going to do a theme with supporting for these scripts)
4. PHP (It is not necessary but in many situations PHP knowledges can help you to understand what are we talking about)
In this article I will explain how to create or build own custom theme in Drupal content management system. To create the custom theme in drupal, follows the following steps:
Step 1: Create a folder with ‘mycustomtheme’ name; it is not mandatory that you’ve used the same name it depends on your convenience.
Step 2: Before proceeding to next step first of all you’ve to aware some file format which is widely used in drupal template. Let’s take a brief idea about these files.
1. .info file (Drupal Information File): A required file that is new to Drupal 6 which provides information about the theme.
2. page.tpl.php: The main template file that defines the content on most of the page.
3. style.css: The CSS file that sets CSS rule for the template.
4. node.tpl.php: this file defines the content of node.
5. block.tpl.php: Defines the content of blocks.
6. comment.tpl.php: defines the content of comment.
7. box.tpl.php: puts a box around things like comment.
8. style-rtl.css: I think it's a CSS for right to left languages and can be ignored if you're using a left-to-right language like English.
Here I’m making custom theme files format like this:
This is only for our convenience; it is not a mandatory part.
Creating .info file for drupal custom theme:
Here I have created info file with ‘mycustomtheme.info’ name and the code of this file will be:
‘mycustomtheme.info’ Code:
; $Id: typebased.info,v 1.6 2011/01/10 14:20:00 jarek Exp $
name = MyTheme
description = MyTheme.
version = VERSION
core = 7.x
engine = phptemplate
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = favicon
stylesheets[all][] =base.css
stylesheets[all][] =style.css
stylesheets[all][] =colors.css
regions[header_menu] =Header menu
regions[footer_menu] =Footer menu
regions[sidebar] =Sidebar
regions[content] =Content
regions[footer_column_first] =Footer first column
regions[footer_column_second]= Footer second column
regions[help] =Help
regions[page_top] =Page top
regions[page_bottom] =Page bottom
settings[base_font_size] ='12px'
settings[layout_1_width] ='75%'
settings[layout_1_min_width] ='500px'
settings[layout_1_mawidth] ='900px'
settings[layout_2_width] ='85%'
settings[layout_2_min_width] ='850px'
settings[layout_2_mawidth] ='1000px'
settings[trim_pager] ='5'
; Information added by drupal.org packaging script on 2011-01-10
version ="7.x-1.8"
core = "7.x"
project ="MyTheme"
datestamp ="1294669562"
<div id="wrapper">
<div id="header">
<div id="branding">
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home');?>" />
</a>
<?php endif; ?>
<?php if ($site_name): ?>
<?php if ($title): ?>
<div id="site-name"><strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a>
</strong></div>
<?php else: /* Use h1 when the content title is empty */ ?>
<h1 id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a>
</h1>
<?php endif; ?>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id="site-slogan"><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#branding -->
<?php if ($page['header_menu']): ?>
<div id="header-menu">
<?php print render($page['header_menu']); ?>
</div>
<?php endif; ?>
</div> <!-- /#header -->
<div id="main">
<?php if ($page['content']): ?>
<div id="content" class="column">
<div class="inner">
<?php if ($breadcrumb): ?><div id="breadcrumb" class="clearfix"><?php print $breadcrumb; ?></div><?php endif; ?>
<?php if ($messages): ?><div id="messages"><?php print $messages; ?></div><?php endif; ?>
<?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title && !isset($node)): ?>
<h1 class="page-title"><?php print $title ?></h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
</div> <!-- /.inner -->
</div> <!-- /#content -->
<?php endif; ?>
<?php if ($page['sidebar']): ?>
<div id="sidebar" class="column">
<?php print render($page['sidebar']); ?>
</div> <!-- /#sidebar-first -->
<?php endif; ?>
</div> <!-- /#main -->
<div id="footer">
<?php if ($page['footer_column_first'] || $page['footer_column_second']): ?>
<h2 class="element-invisible"><?php print t('Footer'); ?></h2>
<div id="footer-columns">
<?php if ($page['footer_column_first']): ?>
<div id="footer-column-first" <?php if (!$page['footer_column_second']): ?>class="single"<?php endif; ?>>
<?php print render($page['footer_column_first']); ?>
</div>
<?php endif; ?>
<?php if ($page['footer_column_second']): ?>
<div id="footer-column-second" <?php if (!$page['footer_column_first']): ?>class="single"<?php endif; ?>>
<?php print render($page['footer_column_second']); ?>
</div>
<?php endif; ?>
</div><!-- /#footer-columns -->
<?php endif; ?>
<div id="closure">
<div id="info">Drupal theme by <a href="http://www.woothemes.com">WooThemes</a> and <a href="http://www.kiwi-themes.com">Kiwi Themes</a></div>
<?php if ($page['footer_menu']): ?>
<div id="footer-menu">
<?php print render($page['footer_menu']); ?>
</div> <!-- /#footer-menu -->
<?php endif; ?>
</div> <!-- /#closure -->
</div> <!-- /#footer -->
</div> <!-- /#wrapper -->
‘maintenance-page.tpl.php’ Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>">
<div id="main-wrapper">
<div id="main">
<div id="branding" <?php if ($logo): ?>class="logo-enabled clearfix"<?php endif; ?>>
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
<?php if ($site_name): ?>
<h1 id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id="site-slogan"><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#branding -->
<div id="message">
<?php if (!empty($title)): ?>
<h1 class="title" id="page-title"><?php print $title; ?></h1>
<?php endif; ?>
<?php print $content; ?>
</div>
</div> <!-- /#main -->
</div> <!-- /#main-wrapper -->
</body>
</html>
<div class="node-wrapper">
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<div class="node-meta">
<?php if ($display_submitted): ?>
<div class="date">
<div class="day"><?php print format_date($node->created, 'custom', 'd') ?></div>
<div class="month-and-year">
<div class="month"><?php print format_date($node->created, 'custom', 'M') ?></div>
<div class="year"><?php print format_date($node->created, 'custom', 'Y') ?></div>
</div>
</div>
<div class="user-name"><?php print $name; ?></div>
<?php endif; ?>
<?php print render($content['links']['comment']); ?>
</div> <!-- /.node-meta -->
<div class="content"<?php print $content_attributes; ?>>
<?php print render($title_prefix); ?>
<?php if ($page): ?>
<h1 class="node-title" <?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h1>
<?php endif; ?>
<?php if (!$page): ?>
<h2 class="node-title" <?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
print render($content['links']);
?>
</div>
<?php print render($content['comments']); ?>
</div> <!-- /.node -->
<?php if (!$page): ?>
<div class="node-separator"></div>
<?php endif; ?>
</div> <!-- /.node-wrapper -->
Now open the Drupal Administrator Panel and go to option ‘Appearance’.
To install the Theme, click on ‘Install new theme’ link and select your file either it on web or on local computer.
After choosing your file, click on ‘Install’ button to install your theme.
Now your plugin installed successfully in your website. If you want to set it as default theme of your website then just click on Enable newly added themes -> set as default.
This is your newly installed theme. Now click on ‘Enable and set default’ button.
Now you can see your website with look and feel or newly installed theme.
This is the complete description on creating custom theme in drupal. I hope you will enjoy it.
Leave Comment